<template>
	<view class="page-header">
		<view class="title">{{ title }}</view>
		<view v-if="subtitle" class="subtitle">{{ subtitle }}</view>
	</view>
</template>

<script>
export default {
	name: 'page-header',
	props: {
		title: {
			type: String,
			required: true
		},
		subtitle: {
			type: String,
			default: ''
		}
	}
}
</script>

<style lang="scss" scoped>
.page-header {
	margin-bottom: 24px;
	
	.title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
		margin-bottom: 8px;
	}
	
	.subtitle {
		font-size: 14px;
		color: #666;
	}
}

@media screen and (max-width: 768px) {
	.page-header {
		margin-bottom: 16px;
		
		.title {
			font-size: 20px;
		}
		
		.subtitle {
			font-size: 12px;
		}
	}
}
</style> 